<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告列表</title>
    <!--2 引入element ui css样式-->
    <!--2.1 引入element ui-->
    <link rel="stylesheet" href="../../public/element-ui/index.css">
    <style>
        .el-collapse-item__header {
            background-color: whitesmoke;
        }
    </style>
</head>
<body>
<!--3 创建div容器,挂载vue实例-->
<div id="app">
    <el-collapse>

        <template v-for="(item,index) in tableData">
            <el-collapse-item>
                <template slot="title"><div style="margin-left: 40px;"><h2>{{item.title}}</h2></div></template>
                <template slot="name">{{item.id}}</template>
                <div style="float: left"><h3>内容：{{item.desc}}</h3></div>

            </el-collapse-item>
        </template>
    </el-collapse>

    <el-dialog width="80%"
               :title="dialog.title"
               :visible.sync="dialog.show"
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               :modal-append-to-body='false'
               :show-close='false'>
        <el-form ref="myform" :model="mymodel" label-width="100px">
            <el-form-item label="ID：" prop="id" hidden>
                <el-input v-model="mymodel.id"></el-input>
            </el-form-item>
            <el-form-item label="公告标题：" prop="title">
                <el-input v-model="mymodel.title"></el-input>
            </el-form-item>
            <el-form-item label="公告简介：" prop="desc">
                <el-input v-model="mymodel.desc"></el-input>
            </el-form-item>
            <el-form-item label="公告内容：" prop="content">
                <el-input type="textarea" v-model="mymodel.content" :rows="5" placeholder="请输入公告内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" round size="small" @click="save_button()">保存</el-button>
                <el-button type="danger" round size="small" @click="cancel_button()">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<!--1 从本地引入js库 锁定版本-->
<!--1.1 引入vue-->
<script src="../../public/vue/vue.min.js"></script>
<!--1.2 引入element ui-->
<script src="../../public/element-ui/index.js"></script>
<!--1.3 引入 axios-->
<script src="../../public/axios/axios.min.js"></script>
<!--1.4 引入 自定义js包-->
<script src="../../public/mx-config.js"></script>

<script>
    //4 创建vue实例
    const app = new Vue({
        el: '#app',
        data: function () {
            return {
                activeNames: ['1'],
                tableData : [],
                mymodel : {
                    id : '',
                    title : '',
                    desc : '',
                    content : ''
                },
                dialog : {
                    show : false,
                    title : '',
                    option : ''
                },
                selectedIndex : -1
            }
        },
        mounted: function () {
            this.initTable()
        },
        methods: {
            initTable:function(){
                axios.get("/noticeList").then(res=>{
                    if (res.status == '200'){
                        this.tableData = res.data;
                    }else {
                        console.log("get error")
                    }
                })
            },
            edit_button:function(index){
                this.dialog = {
                    show : true,
                    title : '修改公告',
                    option : 'edit'
                }
                let notice = this.tableData[index]
                axios.get('/noticeList/'+notice.id).then(res=>{
                    if (res.status == '200'){
                        this.mymodel = {
                            id : res.data.id,
                            title : res.data.title,
                            desc : res.data.desc,
                            content : res.data.content
                        }
                    }
                })
                this.selectedIndex = index
            },
            add_button:function(){
                this.dialog = {
                    show : true,
                    title : '添加公告',
                    option : 'add'
                }
            },
            delete_button:function(index){
                let notice = this.tableData[index]
                axios.delete('/noticeList/'+notice.id).then(res=>{
                    if (res.status == '200'){
                        //更新列表
                        this.tableData.splice(index,1);
                        this.initTable();
                    }else{
                        console.log("delete error")
                    }
                })
            },
            save_button:function(){
                if (this.dialog.option == 'edit'){
                    axios.put('/noticeList',this.mymodel).then(res=>{
                        if (res.status == '200'){
                            //更新列表
                            this.tableData.splice(this.selectedIndex,1,res.data);
                            this.initTable();
                        }else {
                            console.log("put error")
                        }
                    })
                    this.mymodel = {
                        id : '',
                        title : '',
                        desc : '',
                        content : ''
                    }
                    this.dialog = {
                        show : false,
                        title : '',
                        option : ''
                    }
                    this.selectedIndex = -1
                }
                if (this.dialog.option == 'add'){
                    axios.post('/noticeList',this.mymodel).then(res=>{
                        if (res.status == '200'){
                            //更新列表
                            this.tableData.push(res.data);
                            this.initTable();
                        }else{
                            console.log("post error")
                        }
                    })
                    this.mymodel = {
                        id : '',
                        title : '',
                        desc : '',
                        content : ''
                    }
                    this.dialog = {
                        show : false,
                        title : '',
                        option : ''
                    }
                }
            },
            cancel_button:function () {
                this.dialog = {
                    show : false,
                    title : '',
                    option : ''
                }
                this.mymodel = {
                    id : '',
                    title : '',
                    desc : '',
                    content : ''
                }
                this.selectedIndex = -1
            }
        }
    });

</script>
</body>
</html>